<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/my-style.css">
    <title>双色球生成器-JS版</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
            list-style: none;
        }

        #app {
            width: 1200px;
            margin: auto;
        }

        .ball {
            width: 40px;
            height: 40px;
            text-align: center;
            border-radius: 50%;
            line-height: 40px;
            font-weight: 600;
            font-size: 110%;
            color: #fff;
            display: inline-block;
        }

        .red-ball {
            background-color: #f30000;
            margin-right: 10px;
        }

        .blue-ball {
            background-color: #2663fb;

        }

        #result-box>li {
            display: flex;
            padding: 5px 10px;
        }
    </style>
</head>

<body>
    <main id="app">
        <div class="form">
            <div class="form-item">
                <label class="form-item__label" for="count">随机注数</label>
                <div class="form-item__content">
                    <input class="input" type="number" id="count" step="1" max="99" min="1" value="5" maxlength="2" />
                </div>
            </div>
            <div class="form-item">
                <button id="submit" class="button button--primary" style="margin-left: 120px;">确认</button>
            </div>
        </div>
        <section class="descriptions">
            <header class="descriptions__header">
                结果
            </header>
            <ul class="descriptions__body" id="result-box">

            </ul>
        </section>
    </main>
</body>
<script>
    // 获取随机数：[0,max)
    function getRandom(max) {
        return Math.floor(Math.random() * max);
    }

    const red = [];

    const blue = [];

    /**
     * 初始化
     */
    function initBall() {
        // 红球：1-33 篮球：1-16
        for (let i = 1; i <= 33; i++) {
            red.push(i);
            if (i <= 16) {
                blue.push(i);
            }
        }
    }

    /*
     * 随机一注双色球
     */
    function getOne() {
        // 将红色球的池子，拷贝到新数组中
        let red2 = red.map(v => v);

        let result = [];

        // 随机六个红色球
        for (let i = 0; i < 6; i++) {
            let index = getRandom(red2.length);
            let value = red2.splice(index, 1);
            result.push(value[0]);
        }

        // 排序
        result.sort((n, m) => n - m);

        // 添加蓝球
        let index = getRandom(blue.length);
        result.push(blue[index]);

        return result;

    }

    // 查找DOM节点
    const number = document.querySelector("#count");
    const button = document.querySelector("#submit");
    const ul = document.querySelector("#result-box");

    // 绑定点击事件处理函数
    button.addEventListener("click", () => {
        // 验证不为空
        if (!number.value.trim()) {
            return
        }

        /**
         * 根据一注双色球号码创建一个li，然后添加进ul中
         */
        function createLi(a) {
            const li = document.createElement("li");
            for (let i in a) {
                const span = document.createElement("span");
                const classList = span.classList;
                classList.add("ball");
                // 最后一个：蓝球
                if (i == a.length - 1) {
                    classList.add("blue-ball");
                    // 红球
                } else {
                    classList.add("red-ball");
                }
                span.innerText = a[i];
                li.appendChild(span);
            }
            ul.append(li);
        }

        for (let i = 0; i < number.value; i++) {
            createLi(getOne());
        }
    })

    initBall();

</script>

</html>